<template>
  <div class="home">
    <!-- <h1>这是我的Home页面</h1> -->
	<div style="display:flex;align-items: center;">
		<div style="width:9%;display:flex;justify-content: flex-end; align-items: center;"><img src="../assets/消息h.png" style='width:75%'/></div>
		<div style="width:81%;display: flex;align-items: center;">
			<form action="/" style="width: 100%;">
			      <van-search
			        v-model="value"
			        placeholder="智能积木 越野四驱车"
			        @search="onSearch()"
					@click="onSearch()"
					
			      />
			    </form>
		</div>
		<div style="width:10%;display: flex;align-items: center;"><img src="../assets/扫码.png" style='width:80%'/></div>
	</div>
	
    <!-- 新品 -->
    <!-- 导航条 -->
    <van-tabs @click="changePage">
      <van-tab v-for="item in categoryliset" :title="item.name" :key="item.id">
      </van-tab>
    </van-tabs>
    <!-- 上啦刷新 -->

    <!-- 正文 -->
    <div v-for="item in aggregate" :key="item.id">
      <!-- 轮播图 -->
      <lonbotu :gettablist="item.data" v-if="item.type == 'swiper'"></lonbotu>
      <!-- 宫格-->
      <griditem :getdyg="item.data" v-if="item.type == 'indexnavs'"></griditem>
      <!-- 三图片-->
      <threadc :getthreadc="item.data" v-if="item.type == 'threeAdv'"></threadc>
      <!-- 大图片 -->
      <setoneAdvs
        :setoneAdvs="item.data"
        v-if="item.type == 'oneAdv'"
      ></setoneAdvs>
      <!-- //商品数据 -->
      <gettrtr :getlisets="item.data" v-if="item.type == 'list'"></gettrtr>
    </div>
  </div>
</template>

<script>
import lonbotu from "../components/homeym/lonbotu";
import griditem from "../components/homeym/griditem";
import threadc from "../components/homeym/threadc";
import setoneAdvs from "../components/homeym/oneAdvs";
import gettrtr from "../components/homeym/getlisets";

import { category, categoryPage } from "../lib/home";
export default {
  name: "Home",
  data() {
    return {
      value: "",
      //  count: 0,
      // isLoading: false,
      categoryliset: [],
      aggregate: [],
    };
  },
  created() {
    console.log("home");
    this.inti(1, 1);
  },
  mounted() {
    category().then((res) => {
      console.log(res);
      if (res.msg === "ok") {
        this.categoryliset = res.data.category;
      }
    });
  },
  methods: {
    // 导航条数据
    navigation() {
      category().then((res) => {
        console.log(res);
        if (res.msg === "ok") {
          this.categoryliset = res.data.category;
        } else {
          console.log("错误");
        }
      });
    },
    // 首页分页数据
    inti(id, page) {
      categoryPage({ id: id, page: page }).then((res) => {
        console.log(res);
        if (res.data.length != 0) {
          this.aggregate = res.data;
        } else {
          this.aggregate = [];
        }
      });
    },
    changePage(index) {
      let _id = this.categoryliset[index].id;
      this.inti(_id, 1);
    },
    onSearch(value) {
      // console.log(valname);
	  this.$router.push({
	    name: "Search",
	  });
	  
	  
	  
	  
      // this.$router.push({
      //   name: "Liebiaoym",
      //   query: {
      //    _value:value
      //   },
      // });
    },
  },
  components: {
    lonbotu,
    griditem,
    threadc,
    gettrtr,
    setoneAdvs,
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.yangshi {
  display: flex;
  width: 100%;
  display: inline;
}
.wenzhiys {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #c8c8c8;
  font-size: 13px;
  line-height: 26px;
}
.zhitiyans {
  font-family: "微软雅黑";
  font-weight: bold;
  font-size: 16px;
  line-height: 26px;
}
.yanshi0 {
  color: #ff6200;
  font-size: 20px;
}
.yanshi1 {
  color: #c8c8c8;
  padding-left: 5%;
  line-height: 26px;
}
</style>